<!DOCTYPE html>
<html>
    <head>
      <meta charset="utf-8">
      <title>test</title>
      <meta name="renderer" content="webkit">
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
      <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
      <link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
      <link rel="stylesheet" href="../../layuiadmin/style/admin.css" media="all">
      <link rel="stylesheet" href="../../layuiadmin/style/login.css" media="all">
        <!-- 滑动条-->
      <link rel="stylesheet" href="../../public/plugins/rangeslider/rangeslider.css" />
      <link rel="stylesheet" href="../../public/res/css/g.css" media="all">
      <link rel="stylesheet" href="../../public/res/css/pGis.css" media="all">
      <link rel="stylesheet" href="../../public/plugins/swiper/swiper-3.2.7.min.css" />
      <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=40GWXiduhOft266lK4N1dopL"></script>
    </head>
    <body>
        <div class="content">
            <div class="layui-row layui-col-space1 par-box">
                <div class="left_box">
                    <div class="case_grid_box">
                        <button class="layui-btn layui-btn-normal hide"  name="searBtn1"><i class="zkuasgm-icon">&#xe626;</i></button>
                        <button class="layui-btn layui-btn-fluid layui-btn-normal" title="已选择6个网格" name="searBtn1">选择网格<span class="layui-badge">6</span></button>
                    </div>
                    <div class="gridbox">
                        <div class="layui-col-md1 toolbar">
                            <ul>
                                <li class="active" target-name="common"><i class="zkuasgm-icon">&#xe63d;</i>
                                    <p>常用功能</p>
                                </li>
                                <li target-name="search"><i class="zkuasgm-icon">&#xe60c;</i>
                                    <p>搜索</p>
                                </li>
                                <li target-name="maptool"><i class="zkuasgm-icon">&#xe60e;</i>
                                    <p>地图工具</p>
                                </li>
                            </ul>
                        </div>
                        <!-- 左1 -->
                        <div class="layui-col-md2 box-l" id="move-left">
                            <div class="grid-demo grid-demo-bg1">
                                <div class=" hide" id="search">
                                    <div class="list-hd">
                                        <div class="layui-tab  layui-tab-card zk-tab-one">
                                            <ul class="layui-tab-title">
                                                <li class="layui-this">业务</li>
                                                <li>地址</li>
                                                <li>兴趣点</li>
                                            </ul>
                                            <div class="layui-tab-content">
                                                <div class="layui-tab-item layui-show">
                                                    <div class="mysearch-box">
                                                        <ul>
                                                            <li>
                                                                <div class="layui-row layui-col-space5">
                                                                    <div class="layui-col-md8">
                                                                        <button class="layui-btn layui-btn-fluid layui-btn-primary" title="已选择99个业务" name="searBtn2">业务<span class="layui-badge layui-bg-blue">99+</span></button>
                                                                    </div>
                                                                    <div class="layui-col-md4">
                                                                         <button class="layui-btn layui-btn-normal layui-btn-fluid" data-type="reload">搜索</button>
                                                                    </div>
                                                                </div>
                                                            </li>
                                                            <li>
                                                                <div class="layui-inline">
                                                                    <input class="layui-input" name="id" autocomplete="off" size="20">
                                                                </div>
                                                                <button class="layui-btn layui-btn-normal" data-type="reload">搜索</button>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                                <!-- 2 -->
                                                <div class="layui-tab-item">
                                                    <div class="mysearch-box">
                                                        <ul>
                                                            <li>
                                                                <div class="layui-row layui-col-space5">
                                                                    <div class="layui-col-md12">
                                                                        <button class="layui-btn layui-btn-fluid layui-btn-primary" title="已选择99个业务" name="searBtn2">业务2<span class="layui-badge layui-bg-blue">99+</span></button>
                                                                    </div>
                                                                </div>
                                                            </li>
                                                            <li>
                                                                <div class="layui-inline">
                                                                    <input class="layui-input" name="id" autocomplete="off" size="20">
                                                                </div>
                                                                <button class="layui-btn layui-btn-normal" data-type="reload">搜索</button>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                                <!-- 3 -->
                                                <div class="layui-tab-item">
                                                    <div class="mysearch-box">
                                                        <ul>
                                                            <li>
                                                                <div class="layui-row layui-col-space5">
                                                                    <div class="layui-col-md12">
                                                                        <button class="layui-btn layui-btn-fluid layui-btn-primary" title="已选择99个业务" name="searBtn2">业务3<span class="layui-badge layui-bg-blue">99+</span></button>
                                                                    </div>
                                                                </div>
                                                            </li>
                                                            <li>
                                                                <div class="layui-inline">
                                                                    <input class="layui-input" name="id" id="test-table-demoReload" autocomplete="off" size="20">
                                                                </div>
                                                                <button class="layui-btn layui-btn-normal" data-type="reload">搜索</button>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
        
                                            </div>
                                        </div>
        
                                        <div>
                                            <form class="result-box">
                                                <span>搜索结果<i class="count">142</i></span>
                                            </form>
                                        </div>
                                        <form class="layui-form" action="">
                                            <div class="layui-form-item">
                                                <div class="search_resuit_filter_box">
                                                    <select name="city" lay-verify="required">
                                                        <option value="0">全部(142)</option>
                                                        <option value="1">刑事案件(30)</option>
                                                        <option value="2">危害国防(19)</option>
                                                        <option value="3">案件(51)</option>
                                                        <option value="4">盗窃(32)</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                    <div class="list-bd">
                                        <ul class="staff-cells">
                                            <li class="staff-cell">
                                                <div class="staff-cell_hd">
                                                    <span class="zkuasgm-icon">&#xe610;<i></i></span>
                                                </div>
                                                <div class="staff-cell_bd">
                                                    <span>老地方饭店内发生诈骗案</span>
                                                    <span>广西壮族自治区贺州市平桂区西湾街道西发街60号老地方饭店</span>
                                                </div>
                                            </li>
                                            <li class="staff-cell">
                                                <div class="staff-cell_hd">
                                                    <span class="zkuasgm-icon">&#xe610;<i></i></span>
                                                </div>
                                                <div class="staff-cell_bd">
                                                    <span>老地方饭店内发生诈骗案</span>
                                                    <span>广西壮族自治区贺州市平桂区西湾街道西发街60号老地方饭店</span>
                                                </div>
                                            </li>
                                            <li class="staff-cell">
                                                <div class="staff-cell_hd">
                                                    <span class="zkuasgm-icon">&#xe610;<i></i></span>
                                                </div>
                                                <div class="staff-cell_bd">
                                                    <span>老地方饭店内发生诈骗案</span>
                                                    <span>广西壮族自治区贺州市平桂区西湾街道西发街60号老地方饭店</span>
                                                </div>
                                            </li>
                                            <li class="staff-cell">
                                                <div class="staff-cell_hd">
                                                    <span class="zkuasgm-icon">&#xe610;<i></i></span>
                                                </div>
                                                <div class="staff-cell_bd">
                                                    <span>老地方饭店内发生诈骗案</span>
                                                    <span>广西壮族自治区贺州市平桂区西湾街道西发街60号老地方饭店</span>
                                                </div>
                                            </li>
                                            <li class="staff-cell">
                                                <div class="staff-cell_hd">
                                                    <span class="zkuasgm-icon">&#xe610;<i></i></span>
                                                </div>
                                                <div class="staff-cell_bd">
                                                    <span>老地方饭店内发生诈骗案</span>
                                                    <span>广西壮族自治区贺州市平桂区西湾街道西发街60号老地方饭店</span>
                                                </div>
                                            </li>
                                            <li class="staff-cell">
                                                <div class="staff-cell_hd">
                                                    <span class="zkuasgm-icon">&#xe610;<i></i></span>
                                                </div>
                                                <div class="staff-cell_bd">
                                                    <span>老地方饭店内发生诈骗案</span>
                                                    <span>广西壮族自治区贺州市平桂区西湾街道西发街60号老地方饭店</span>
                                                </div>
                                            </li>
                                            <li class="staff-cell">
                                                <div class="staff-cell_hd">
                                                    <span class="zkuasgm-icon">&#xe610;<i></i></span>
                                                </div>
                                                <div class="staff-cell_bd">
                                                    <span>老地方饭店内发生诈骗案</span>
                                                    <span>广西壮族自治区贺州市平桂区西湾街道西发街60号老地方饭店</span>
                                                </div>
                                            </li>
                                            <li class="staff-cell">
                                                <div class="staff-cell_hd">
                                                    <span class="zkuasgm-icon">&#xe610;<i></i></span>
                                                </div>
                                                <div class="staff-cell_bd">
                                                    <span>老地方饭店内发生诈骗案</span>
                                                    <span>广西壮族自治区贺州市平桂区西湾街道西发街60号老地方饭店</span>
                                                </div>
                                            </li>
                                            <li class="staff-cell">
                                                <div class="staff-cell_hd">
                                                    <span class="zkuasgm-icon">&#xe610;<i></i></span>
                                                </div>
                                                <div class="staff-cell_bd">
                                                    <span>老地方饭店内发生诈骗案</span>
                                                    <span>广西壮族自治区贺州市平桂区西湾街道西发街60号老地方饭店</span>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="btn_box" id="common">
                                    <fieldset class="layui-elem-field">
                                        <legend>分类1</legend>
                                        <div class="layui-row">
                                            <div class="btn_item layui-col-xs4">
                                                <div class="grid-btn">
                                                    <span><i class="zkuasgm-icon">&#xe679;</i></span>
                                                </div>
                                                <p>wifi探针</p>
                                            </div>
                                            <div class="btn_item layui-col-xs4">
                                                <div class="grid-btn">
                                                    <span><i class="zkuasgm-icon">&#xe666;</i></span>
                                                </div>
                                                <p>摄像头</p>
                                            </div>
                                            <div class="btn_item layui-col-xs4">
                                                <div class="grid-btn">
                                                    <span><i class="zkuasgm-icon">&#xe621;</i></span>
                                                </div>
                                                <p>PM2.5</p>
                                            </div>
                                            <div class="btn_item layui-col-xs4">
                                                <div class="grid-btn">
                                                    <span><i class="zkuasgm-icon">&#xe851;</i></span>
                                                </div>
                                                <p>网格员</p>
                                            </div>
                                        </div>
                                    </fieldset>
        
                                    <fieldset class="layui-elem-field">
                                        <legend>分类2</legend>
                                        <div class="layui-row">
                                            <div class="btn_item layui-col-xs4">
                                                <div class="grid-btn">
                                                    <span><i class="zkuasgm-icon">&#xe679;</i></span>
                                                </div>
                                                <p>wifi探针</p>
                                            </div>
                                            <div class="btn_item layui-col-xs4">
                                                <div class="grid-btn">
                                                    <span><i class="zkuasgm-icon">&#xe666;</i></span>
                                                </div>
                                                <p>摄像头</p>
                                            </div>
                                            <div class="btn_item layui-col-xs4">
                                                <div class="grid-btn">
                                                    <span><i class="zkuasgm-icon">&#xe621;</i></span>
                                                </div>
                                                <p>PM2.5</p>
                                            </div>
                                            <div class="btn_item layui-col-xs4">
                                                <div class="grid-btn">
                                                    <span><i class="zkuasgm-icon">&#xe851;</i></span>
                                                </div>
                                                <p>网格员</p>
                                            </div>
                                            <div class="btn_item layui-col-xs4">
                                                <div class="grid-btn">
                                                    <span><i class="zkuasgm-icon">&#xe851;</i></span>
                                                </div>
                                                <p>网格员</p>
                                            </div>  
                                        </div>
                                    </fieldset>
                                </div>
                                <div class="btn_box hide" id="maptool">
                                    <fieldset class="layui-elem-field">
                                        <div class="layui-row">
                                            <div class="btn_item layui-col-xs4">
                                                <div class="grid-btn">
                                                    <span><i class="zkuasgm-icon">&#xe679;</i></span>
                                                </div>
                                                <p>线路两旁</p>
                                            </div>
                                            <div class="btn_item layui-col-xs4">
                                                <div class="grid-btn">
                                                    <span><i class="zkuasgm-icon">&#xe666;</i></span>
                                                </div>
                                                <p>地点周边</p>
                                            </div>
                                            <div class="btn_item layui-col-xs4">
                                                <div class="grid-btn">
                                                    <span><i class="zkuasgm-icon">&#xe621;</i></span>
                                                </div>
                                                <p>任意区域</p>
                                            </div>
                                            <div class="btn_item layui-col-xs4">
                                                <div class="grid-btn">
                                                    <span><i class="zkuasgm-icon">&#xe851;</i></span>
                                                </div>
                                                <p>清空所有</p>
                                            </div>
                                            <div class="btn_item layui-col-xs4">
                                                <div class="grid-btn">
                                                    <span><i class="zkuasgm-icon">&#xe851;</i></span>
                                                </div>
                                                <p>移除勾画面</p>
                                            </div>
                                            <div class="btn_item layui-col-xs4">
                                                <div class="grid-btn">
                                                    <span><i class="zkuasgm-icon">&#xe851;</i></span>
                                                </div>
                                                <p>清晰度</p>
                                                <section class="hide more-content" >
                                                    <div class="searchTool">
                                                        <div class="lodRange-control">
                                                            <div class="definition-box">
                                                                <input type="definition" min="2.5" max="100" step="2.5" data-rangeslider>
                                                            </div>
                                                            <span class="layui-badge-rim definitionoutput">50</span>
                                                        </div>
                                                    </div>
                                                </section>
                                            </div>
                                            <div class="btn_item layui-col-xs4">
                                                <div class="grid-btn">
                                                    <span><i class="zkuasgm-icon">&#xe851;</i></span>
                                                </div>
                                                <p>测量距离</p>
                                            </div>
                                            <div class="btn_item layui-col-xs4">
                                                <div class="grid-btn">
                                                    <span><i class="zkuasgm-icon">&#xe851;</i></span>
                                                </div>
                                                <p>测量面积</p>
                                            </div>
                                        </div>
                                    </fieldset>
                                    <fieldset class="layui-elem-field">
                                        <div class="layui-row">
                                            <div class="btn_item layui-col-xs4">
                                                <div class="grid-btn choose-more">
                                                    <span><i class="zkuasgm-icon">&#xe7d1;</i></span>
                                                </div>
                                                <p>可视域分析</p>
                                                <section class="hide more-content" >
                                                    <div class="searchTool">
                                                        <div class="more-content-item">
                                                            <div class="grid-btn analysis-viewshed">
                                                                <span><i class="zkuasgm-icon">&#xe66e;</i></span>
                                                            </div>
                                                            <p>开始分析</p>
                                                        </div>
                                                        <div class="more-content-item">
                                                            <div class="grid-btn analysis-remove">
                                                                <span><i class="zkuasgm-icon">&#xe612;</i></span>
                                                            </div>
                                                            <p>清除</p>
                                                        </div>
                                                    </div>
                                                </section>
                                            </div>
                                            <div class="btn_item layui-col-xs4">
                                                <div class="grid-btn analysis-sightline choose-more">
                                                    <span><i class="zkuasgm-icon">&#xe604;</i></span>
                                                </div>
                                                <p>通视分析</p>
                                                <section class="hide more-content" >
                                                    <div class="searchTool">
                                                        <div class="more-content-item" style="width: 75px">
                                                            <div class="grid-btn analysis-chooseView">
                                                                <span><i class="zkuasgm-icon">&#xe66e;</i></span>
                                                            </div>
                                                            <p>选取观察位置</p>
                                                        </div>
                                                        <div class="more-content-item">
                                                            <div class="grid-btn analysis-addPoint">
                                                                <span><i class="zkuasgm-icon">&#xe612;</i></span>
                                                            </div>
                                                            <p>添加目标点</p>
                                                        </div>
                                                        <div class="more-content-item">
                                                            <div class="grid-btn analysis-remove">
                                                                <span><i class="zkuasgm-icon">&#xe612;</i></span>
                                                            </div>
                                                            <p>清除</p>
                                                        </div>
                                                    </div>
                                                </section>
                                            </div>
                                            <div class="btn_item layui-col-xs4">
                                                <div class="grid-btn choose-more">
                                                    <span><i class="zkuasgm-icon">&#xe61d;</i></span>
                                                </div>
                                                <p>清晰度</p>
                                                <section class="hide more-content" >
                                                    <div class="searchTool">
                                                        <!--<input type="hidden" class="single-slider"  value="0"/>-->
                                                        <div class="lodRange-control">
                                                            <div class="definition-box">
                                                                <input type="definition" min="2.5" max="100" step="2.5" data-rangeslider>
                                                            </div>
                                                            <span class="layui-badge-rim definitionoutput">50</span>
                                                        </div>
                                                    </div>
                                                </section>
                                            </div>
                                        </div>
                                    </fieldset>
                                </div>
                            </div>
                        </div>
                        <!-- 左2 -->
                    </div>
                    
                </div>
                <!-- leftbox -->
    
                <div class="layui-col-md9 r-box" id="move-right">
                    <div class="layui-row grid-demo">
                        <div class="flex-icon">
                            <span><i class="zkuasgm-icon open">&#xe9be;</i></span>
                        </div>
                        <div class="layui-col-md12" id="r-title">
                            <div class="layui-row layui-col-space5 countboxs">
                                <div>
                                    <ul>
                                        <li><span><i class="zkuasgm-icon bg1">&#xe6e5;</i>当日结办<i class="number">(131)</i></span></li>
                                        <li><span><i class="zkuasgm-icon bg2">&#xe64b;</i>累计事件<i class="number">(131)</i></span></li>
                                        <li><span><i class="zkuasgm-icon bg3">&#xe616;</i>实有房屋<i class="number">(131)</i></span></li>
                                        <li><span><i class="zkuasgm-icon bg4">&#xe61b;</i>累计出租屋<i class="number">(131)</i></span></li>
                                        <li><span><i class="zkuasgm-icon bg5">&#xe7e1;</i>当日采集<i class="number">(131)</i></span></li>
                                        <li><span><i class="zkuasgm-icon bg6">&#xe6e6;</i>累计排查<i class="number">(131)</i></span></li>
                                    </ul>
                                </div>
                                <div class="btn-box">
                                    <button class="layui-btn" target-name="incident" name="事件"><i class="zkuasgm-icon">&#xe64b;</i>事件<i class="tip">12</i></button>
                                    <button class="layui-btn" target-name="monitor" name="摄像头"><i class="zkuasgm-icon">&#xe666;</i>摄像头<i class="tip bg1">5</i></button>
                                    <button class="layui-btn" target-name="internet" name="物联网"><i class="zkuasgm-icon">&#xe7b2;</i>物联网<i class="tip bg3">8</i></button>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md12 b-map-box" id="r-map">
                            <div class="grid-demo grid-demo-bg3">
                                <div id="allmap"></div>
                            </div>
                        </div>
                    </div>
                    <div id="pointInfo-template">
                        <table>
                            <tr>
                                <td>经度:</td>
                                <td class="lon"></td>
                                <td>纬度:</td>
                                <td class="lat"></td>
                                <td>地址:</td>
                                <td class="address"></td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="fullScreenBtn" id="full-screen">
            <a href="####" title="全屏"><i class="zkuasgm-icon">&#xe72c;</i></a>
        </div>
        
        
        <section class="hide" id="incident">
            <div class="layui-card">
                <div class="layui-card-body layadmin-takerates">
                    <div class="layui-text">
                        <ul>
                            <li>
                                <a href="javascript:;">中山“3·28”招商招才盛会引海内外主流媒体深度主流媒体...</a>
                            </li>
                            <li>
                                <a href="javascript:;">南部组团创新创业项目路演会暨坦洲镇第四届创新创</a>
                            </li>
                            <li>
                                <a href="javascript:;">市政协召开十二届第六次常委会</a>
                            </li>
                            <li>
                                <a href="javascript:;">电子科大中山学院第三次党代会明确提出2025年建...</a>
                            </li>
                            <li>
                                <a href="javascript:;">中山成为全省4K电视网络应用试点示范城市</a>
                            </li>
                            <li>
                                <a href="javascript:;">《中山市城市设计管理规定（试行）》公示并征求意见</a>
                            </li>
                            <li>
                                <a href="javascript:;">市工商局负责人做客“周五民声直播室”</a>
                            </li>
                            <li>
                                <a href="javascript:;">我市从源头缓解幼儿园教师学历不高现状</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>
        <section class="hide">
            <div id="monitor">
                <div class="layui-row">
                    <div class="layui-col-xs4">
                        <div class="grid-demo grid-demo-bg1">
                            <img class="img" src="../../public/res/images/mir1.jpeg" />
                        </div>
                    </div>
                    <div class="layui-col-xs4">
                        <div class="grid-demo">
                            <img class="img" src="../../public/res/images/mir2.jpeg" />
                        </div>
                    </div>
                    <div class="layui-col-xs4">
                        <div class="grid-demo grid-demo-bg1">
                            <img class="img" src="../../public/res/images/mir3.jpg" />
                        </div>
                    </div>
                </div>
                <div class="layui-row">
                    <div class="layui-col-xs4">
                        <div class="grid-demo grid-demo-bg1">
                            <img class="img" src="../../public/res/images/mir4.jpg" />
                        </div>
                    </div>
                    <div class="layui-col-xs4">
                        <div class="grid-demo">
                            <img class="img" src="../../public/res/images/mir5.jpg" />
                        </div>
                    </div>
                    <div class="layui-col-xs4">
                        <div class="grid-demo grid-demo-bg1">
                            <img class="img" src="../../public/res/images/mir6.jpg" />
                        </div>
                    </div>
                </div>
                <div class="layui-row">
                    <div class="layui-col-xs4">
                        <div class="grid-demo grid-demo-bg1">
                            <img class="img" src="../../public/res/images/mir7.jpg" />
                        </div>
                    </div>
                    <div class="layui-col-xs4">
                        <div class="grid-demo">
                            <img class="img" src="../../public/res/images/mir8.jpg" />
                        </div>
                    </div>
                    <div class="layui-col-xs4">
                        <div class="grid-demo grid-demo-bg1">
                            <img class="img" src="../../public/res/images/mir9.jpg" />
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section class="layer">
            <div class="hide bd-content grid_layer" id="grid_layer">
                <div class="layui-row full-height">
                    <div class="layui-col-xs4 layui-col-sm4 full-height">
                        <div class="tree_box">
                            <div class="layui-row">
                                <div class="layui-col-xs12">
                                    <input class="layui-input" name="id"  placeholder="搜索内容..." autocomplete="off" size="30">
                                </div>
                            </div>
                            <div class="swiper-container swiper1" name="grid_swiper1">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide">网格</div>
                                    <div class="swiper-slide selected">菜单 2</div>
                                    <div class="swiper-slide">菜单 3</div>
                                    <div class="swiper-slide">菜单 4</div>
                                    <div class="swiper-slide">菜单 5</div>
                                    <div class="swiper-slide">菜单 6</div>
                                    <div class="swiper-slide">菜单 7</div>
                                    <div class="swiper-slide">菜单 8</div>
                                    <div class="swiper-slide">菜单 9</div>
                                    <div class="swiper-slide">菜单 10</div>
                                </div>
                            </div>
                            <div class="swiper-container swiper2 lf-flow" name="grid_swiper2">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide swiper-no-swiping">
                                        <div style="width: 100%;height: 100%;">上面导航栏可以滑动</div>
                                    </div>
                                    <div class="swiper-slide swiper-no-swiping">上面导航栏可以滑动2222 上面导航栏可以滑动2222 上面导航栏可以滑动2222 上面导航栏可以滑动2222 上面导航栏可以滑动2222 上面导航栏可以滑动2222 上面导航栏可以滑动2222 上面导航栏可以滑动2222 上面导航栏可以滑动2222 上面导航栏可以滑动2222 上面导航栏可以滑动2222 上面导航栏可以滑动2222 上面导航栏可以滑动2222 上面导航栏可以滑动2222 上面导航栏可以滑动2222 上面导航栏可以滑动2222 上面导航栏可以滑动2222 上面导航栏可以滑动2222 上面导航栏可以滑动2222
                                    </div>
                                    <div class="swiper-slide swiper-no-swiping">内容 213213123</div>
                                    <div class="swiper-slide swiper-no-swiping">内容 ressssssss</div>
                                    <div class="swiper-slide swiper-no-swiping">内容 ffffffffffff</div>
                                    <div class="swiper-slide swiper-no-swiping">内容 bbbbbbbbbbbbbbbbbvb</div>
                                    <div class="swiper-slide swiper-no-swiping">内容 bvcccccccccccbvb</div>
                                    <div class="swiper-slide swiper-no-swiping">内容 sdasdssssss</div>
                                    <div class="swiper-slide swiper-no-swiping">内容 oiouiouioiuoiuo</div>
                                    <div class="swiper-slide swiper-no-swiping">内容 m,jnkjhkhgjghjugh</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs8 layui-col-sm8 rt-box">
                        <div class="oncase_box rt-flow">
                            <fieldset class="layui-elem-field">
                                 <legend>警务</legend>
                                 <ul>
                                    <li>
                                    <span class="layui-badge layui-badge-rim">警务网格＞平桂区＞羊头镇</span>
                                    <a class="layui-badge layui-bg-cyan" href="####" title="设置"><i class="zkuasgm-icon">&#xe615;</i></a>
                                    <a class="layui-badge layui-bg-blue" href="####" title="颜色"><i class="zkuasgm-icon">&#xe608;</i></a>
                                    <a class="layui-badge" href="####"><i class="zkuasgm-icon" title="删除">&#xe66d;</i></a>
                                    </li>
                                    <li>
                                    <span class="layui-badge layui-badge-rim">警务网格＞平桂区＞羊头镇</span>
                                    <a class="layui-badge layui-bg-cyan" href="####" title="设置"><i class="zkuasgm-icon">&#xe615;</i></a>
                                    <a class="layui-badge layui-bg-blue" href="####" title="颜色"><i class="zkuasgm-icon">&#xe608;</i></a>
                                    <a class="layui-badge" href="####"><i class="zkuasgm-icon" title="删除">&#xe66d;</i></a>
                                    </li>
                                </ul>
                            </fieldset>
                            <fieldset class="layui-elem-field">
                                 <legend>综治</legend>
                                 <ul>
                                    <li>
                                    <span class="layui-badge layui-badge-rim">警务网格＞平桂区＞羊头镇</span>
                                    <a class="layui-badge layui-bg-cyan" href="####" title="设置"><i class="zkuasgm-icon">&#xe615;</i></a>
                                    <a class="layui-badge layui-bg-blue" href="####" title="颜色"><i class="zkuasgm-icon">&#xe608;</i></a>
                                    <a class="layui-badge" href="####"><i class="zkuasgm-icon" title="删除">&#xe66d;</i></a>
                                    </li>
                                    <li>
                                    <span class="layui-badge layui-badge-rim">警务网格＞平桂区＞羊头镇</span>
                                    <a class="layui-badge layui-bg-cyan" href="####" title="设置"><i class="zkuasgm-icon">&#xe615;</i></a>
                                    <a class="layui-badge layui-bg-blue" href="####" title="颜色"><i class="zkuasgm-icon">&#xe608;</i></a>
                                    <a class="layui-badge" href="####"><i class="zkuasgm-icon" title="删除">&#xe66d;</i></a>
                                    </li>
                                </ul>
                            </fieldset>
                        </div>
                    </div>
                </div>  
            </div>
        </section>
        <section class="layer">
            <div class="hide bd-content business_layer" id="business_layer">
                <div class="layui-row full-height">
                    <div class="layui-col-xs4 layui-col-sm4 full-height">
                        <div class="tree_box">
                            <div class="layui-row">
                                <div class="layui-col-xs12">
                                    <input class="layui-input" name="id" id="test-table-demoReload" placeholder="搜索内容..." autocomplete="off" size="30">
                                </div>
                            </div>
                            <div class="swiper-container swiper1" name="business_swiper1">
                                <div class="swiper-wrapper">
                                <div class="swiper-slide selected">业务</div>
                                <div class="swiper-slide">菜单 2</div>
                                <div class="swiper-slide">菜单 3</div>
                                <div class="swiper-slide">菜单 4</div>
                                <div class="swiper-slide">菜单 5</div>
                                <div class="swiper-slide">菜单 6</div>
                                <div class="swiper-slide">菜单 7</div>
                                <div class="swiper-slide">菜单 8</div>
                                <div class="swiper-slide">菜单 9</div>
                                <div class="swiper-slide">菜单 10</div>
                                </div>
                            </div>
                            <div class="swiper-container swiper2 lf-flow" name="business_swiper2">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide swiper-no-swiping">
                                        <div style="width: 100%;height: 100%;">上面导航栏可以滑动</div>
                                    </div>
                                    <div class="swiper-slide swiper-no-swiping">上面导航栏可以滑动2222 上面导航栏可以滑动2222 上面导航栏可以滑动2222 上面导航栏可以滑动2222 上面导航栏可以滑动2222 上面导航栏可以滑动2222 上面导航栏可以滑动2222 上面导航栏可以滑动2222 上面导航栏可以滑动2222 上面导航栏可以滑动2222 上面导航栏可以滑动2222 上面导航栏可以滑动2222 上面导航栏可以滑动2222 上面导航栏可以滑动2222 上面导航栏可以滑动2222 上面导航栏可以滑动2222 上面导航栏可以滑动2222 上面导航栏可以滑动2222 上面导航栏可以滑动2222
                                    </div>
                                    <div class="swiper-slide swiper-no-swiping">内容 213213123</div>
                                    <div class="swiper-slide swiper-no-swiping">内容 ressssssss</div>
                                    <div class="swiper-slide swiper-no-swiping">内容 ffffffffffff</div>
                                    <div class="swiper-slide swiper-no-swiping">内容 bbbbbbbbbbbbbbbbbvb</div>
                                    <div class="swiper-slide swiper-no-swiping">内容 bvcccccccccccbvb</div>
                                    <div class="swiper-slide swiper-no-swiping">内容 sdasdssssss</div>
                                    <div class="swiper-slide swiper-no-swiping">内容 oiouiouioiuoiuo</div>
                                    <div class="swiper-slide swiper-no-swiping">内容 m,jnkjhkhgjghjugh</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs8 layui-col-sm8 rt-box">
                        <div class="oncase_box rt-flow">
                            <fieldset class="layui-elem-field">
                                 <legend>警务</legend>
                                 <ul>
                                    <li>
                                    <span class="layui-badge layui-badge-rim">警务网格＞平桂区＞羊头镇</span>
                                    <a class="layui-badge layui-bg-cyan" href="####" title="设置"><i class="zkuasgm-icon">&#xe615;</i></a>
                                    <a class="layui-badge layui-bg-blue" href="####" title="颜色"><i class="zkuasgm-icon">&#xe608;</i></a>
                                    <a class="layui-badge" href="####"><i class="zkuasgm-icon" title="删除">&#xe66d;</i></a>
                                    </li>
                                    <li>
                                    <span class="layui-badge layui-badge-rim">警务网格＞平桂区＞羊头镇</span>
                                    <a class="layui-badge layui-bg-cyan" href="####" title="设置"><i class="zkuasgm-icon">&#xe615;</i></a>
                                    <a class="layui-badge layui-bg-blue" href="####" title="颜色"><i class="zkuasgm-icon">&#xe608;</i></a>
                                    <a class="layui-badge" href="####"><i class="zkuasgm-icon" title="删除">&#xe66d;</i></a>
                                    </li>
                                </ul>
                            </fieldset>
                            <fieldset class="layui-elem-field">
                                 <legend>综治</legend>
                                 <ul>
                                    <li>
                                    <span class="layui-badge layui-badge-rim">警务网格＞平桂区＞羊头镇</span>
                                    <a class="layui-badge layui-bg-cyan" href="####" title="设置"><i class="zkuasgm-icon">&#xe615;</i></a>
                                    <a class="layui-badge layui-bg-blue" href="####" title="颜色"><i class="zkuasgm-icon">&#xe608;</i></a>
                                    <a class="layui-badge" href="####"><i class="zkuasgm-icon" title="删除">&#xe66d;</i></a>
                                    </li>
                                    <li>
                                    <span class="layui-badge layui-badge-rim">警务网格＞平桂区＞羊头镇</span>
                                    <a class="layui-badge layui-bg-cyan" href="####" title="设置"><i class="zkuasgm-icon">&#xe615;</i></a>
                                    <a class="layui-badge layui-bg-blue" href="####" title="颜色"><i class="zkuasgm-icon">&#xe608;</i></a>
                                    <a class="layui-badge" href="####"><i class="zkuasgm-icon" title="删除">&#xe66d;</i></a>
                                    </li>
                                </ul>
                            </fieldset>
                        </div>
                    </div>
                </div>  
            </div>
        </section>
    </body>
    <script type="text/javascript" src="../../layuiadmin/layui/layui.js" ></script>
    <!--滑动条-->
    <script src="http://www.youhutong.com/static/js/jquery.js"></script>
    <script type="text/javascript" src="../../public/plugins/rangeslider/rangeslider.min.js" ></script>
    <script type="text/javascript" src="../../public/plugins/swiper/swiper-3.4.0.jquery.min.js" ></script>
    <script>
        // 百度地图API功能
        var map = new BMap.Map("allmap"); //创建百度地图实例，这里的allmap是地图容器的id
        var point = new BMap.Point(110.298537, 25.271245); //创建一个点对象，这里的参数是地图上的经纬度
        map.centerAndZoom(point, 15); //这里是将地图的中心移动到我们刚才创建的点；这里的12是地图的缩放界别；数值越大，地图看的越细
//      var opts2={mapTypes:[BMAP_NORMAL_MAP,BMAP_PERSPECTIVE_MAP,BMAP_HYBRID_MAP,BMAP_SATELLITE_MAP]};
//      map.addControl(new BMap.MapTypeControl(opts2));   //添加地图类型控件
        
        // 添加带有定位的导航控件
          var navigationControl = new BMap.NavigationControl({
            // 靠右上角位置
            anchor: BMAP_ANCHOR_TOP_RIGHT ,
            // LARGE类型
            type: BMAP_NAVIGATION_CONTROL_SMALL ,
            // 启用显示定位
            enableGeolocation: true
          });
          map.addControl(navigationControl);
          // 添加定位控件
          var geolocationControl = new BMap.GeolocationControl({
            anchor: BMAP_ANCHOR_TOP_RIGHT,
            offset: new BMap.Size(8, 130)
          });
          geolocationControl.addEventListener("locationSuccess", function(e){
            // 定位成功事件
            var address = '';
            address += e.addressComponent.province;
            address += e.addressComponent.city;
            address += e.addressComponent.district;
            address += e.addressComponent.street;
            address += e.addressComponent.streetNumber;
            alert("当前定位地址为：" + address);
          });
          geolocationControl.addEventListener("locationError",function(e){
            // 定位失败事件
            alert(e.message);
          });
          map.addControl(geolocationControl);
          map.enableScrollWheelZoom(true);
    </script>
    
    <script>
        layui.use(['jquery', 'layer', 'form', 'element'],function() {
            var form = layui.form;
            var $ = layui.jquery;
            var layer = layui.layer;
            var element = layui.element;//Tab的切换功能，切换事件监听等，需要依赖element模块
            var submit = function() {
                return false;
            };
            
            //删除百度地图左下角原生提示，如用3D地图，可删除该行代码
          $('.anchorBL').remove();
            
            //左侧面板伸缩事件
            $('.flex-icon').click(function() {
                $(this).find('.zkuasgm-icon').toggleClass('close');     
                $(this).find('.zkuasgm-icon').toggleClass('open');      //点击位置的icon的切换
                $('#move-left').stop().animate({                //左侧面板伸缩动画
                    width: 'toggle',
                    opacity: 'toggle'
                }, {
                    queue: false,
                    duration: 300
                });
                var para = $('#move-left').css("opacity");      //判断左侧是否伸缩
                if(para == '1') {                           //缩进，右侧面板伸展
                    $("#move-right").animate({
                        width: "auto",
                        left:"65px"
                    }, {
                        queue: false,
                        duration: 300
                    });
                } else {                                //伸展，右侧面板缩进
                    $("#move-right").animate({
                        width: "auto",
                        left:"316px"
                    }, {
                        queue: false,
                        duration: 300
                    });
                }
                
                $('.case_grid_box').find('button').toggleClass('hide');
            });
            
            //点击常用工具及地图工具侧边弹出对应侧栏
            $('.toolbar').find('li').click(function(){
                $('.flex-icon').find('.zkuasgm-icon').removeClass('close');     
                $('.flex-icon').find('.zkuasgm-icon').addClass('open'); 
                $("#move-right").animate({
                    width: "auto",
                    left:"316px"
                }, {
                    queue: false,
                    duration: 300
                });
                $('#move-left').show();
                $(this).addClass('active');
                $(this).siblings().removeClass('active');
                var targetId=$(this).attr('target-name');
                $('#'+targetId+'').show();
                $('#'+targetId+'').siblings().hide();
                
                var tips = layer.tips();
                layer.close(tips);
                
                $('.case_grid_box').find('button:first-child').addClass('hide');
                $('.case_grid_box').find('button:last-child').removeClass('hide');
            });
            
            $(document).on('click', '.grid-btn', function() {
                $(this).addClass('active');
                $(this).parent().siblings().find('.grid-btn').removeClass('active');
            });
            
            var moreContentIndex;
            
            //点击常用工具及地图工具中按钮样式及状态切换
            $(".grid-btn").click(function (e) {
                $(this).parent().parent().parent().find('.grid-btn').removeClass('active');
                $(this).addClass('active');
        
                if($(this).parentsUntil(".layui-layer-wrap").is("html")){
                    moreContentIndex && layer.close(moreContentIndex);
                }
        
                e.stopPropagation();
            });
        
            $('.layui-tab').click(function () {
                moreContentIndex && layer.close(moreContentIndex);
            });
            //地图工具多级工具按钮
            $('.choose-more').click(function (e) {
                moreContentIndex && layer.close(moreContentIndex);
                let $this = $(this);
                let offset = $this.offset();
                var $content = $this.parent().children(".more-content");
                moreContentIndex = layer.open({
                    type: 1,
                    shadeClose: true,
                    shade: false,
                    closeBtn: 1,
                    title: false,
                    offset: [offset.top + 50 +'px', offset.left + 50 + 'px'],
                    // area: ['400px'],
                    zIndex: 1000,
                    content: $content,
                    success: function(layero, index){
                    },
                    cancel: function(layero, index){
                    },
                });
                e.stopPropagation();
        
            });
            
//          $('.type-box').find('li').click(function(){
//              $(this).addClass('active');
//              $(this).siblings().removeClass('active');
//              var targetId=$(this).attr('target-name');
//              $('#'+targetId+'').siblings('.select-box').slideUp();
//              $('#'+targetId+'').slideToggle();
//          })
            
            //右上角事件、摄像图、物联网按钮弹窗事件
            $('.btn-box').find('button').click(function(){
                var targetId=$(this).attr('target-name');
                var tpml=$('#'+targetId+'').html();
                var title=$(this).attr('name');
                layer.open({
                  type: 1,
                  skin: 'layui-layer-rim', //加上边框
                  title:title+'信息',
                  area: ['620px', 'auto'], //宽高
                  content: tpml
                });
            });
            //网格弹窗
            $('[name="searBtn1"]').on({
                click:function(){
                    layer.closeAll();
                    var $grid_content = $(".grid_layer");
                    layer.open({
                      type: 1,
                      title: '选择网格',
                      shadeClose: true,
                      shade: 0,
                      area: ['50%', '60%'],
                      content: $grid_content
                    });
                    Slide('grid');//tab的滑动插件
                }
            });
            //业务弹窗
            $('[name="searBtn2"]').on({
                click:function(){
                    layer.closeAll();
                    var $business_content = $(".business_layer");
                    layer.open({
                      type: 1,
                      title: '选择业务',
                      shadeClose: true,
                      shade: 0,
                      area: ['50%', '60%'],
                      content: $business_content
                    });
                    Slide('business');//tab的滑动插件
                }
            });
            
            //全屏监听
            $("#full-screen").click(function () {
                var docElm = window.frameElement;
                var elm = document.documentElement;
                var requestMethod = elm.requestFullScreen || elm.webkitRequestFullScreen || elm.mozRequestFullScreen || elm.msRequestFullscreen;
                if (elm.msRequestFullscreen) {
                    elm = docElm;
                }
                requestMethod.call(elm);
        
                if (!isFullscreenForNoScroll()) {
                    (docElm.requestFullscreen && docElm.requestFullscreen()) ||
                    (docElm.mozRequestFullScreen && docElm.mozRequestFullScreen()) ||
                    (docElm.webkitRequestFullscreen && docElm.webkitRequestFullscreen()) ||
                    (docElm.msRequestFullscreen && docElm.msRequestFullscreen());
                } else {
                    // 判断各种浏览器，找到正确的方法
                    document.exitFullscreen ? document.exitFullscreen() :
                        document.mozCancelFullScreen ? document.mozCancelFullScreen() :
                            document.webkitExitFullscreen ? document.webkitExitFullscreen() : '';
                }
                function isFullscreenForNoScroll() {
                    return document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
                }
            });
        });
    </script>
    <script>
        //业务及网格弹框中tab滑动功能插件参数设置
        function Slide(param) {
            function setCurrentSlide(ele, index) {
                //$(".swiper1 .swiper-slide").removeClass("selected");
                $('[name="'+param+'_swiper1"]').find('.swiper-slide').removeClass("selected");
                ele.addClass("selected");
                //swiper1.initialSlide=index;
            }
            var initIndex=0;
            var sp1=$('[name="'+param+'_swiper1"]');
            var sp2=$('[name="'+param+'_swiper2"]');
            
            initIndex=$('[name="'+param+'_swiper1"]').find('.swiper-slide.selected').index();
            
            var swiper1 = new Swiper(sp1, {
                //设置slider容器能够同时显示的slides数量(carousel模式)。
                //可以设置为number或者 'auto'则自动根据slides的宽度来设定数量。
                //loop模式下如果设置为'auto'还需要设置另外一个参数loopedSlides。
                slidesPerView: 3.5,
                paginationClickable: true, //此参数设置为true时，点击分页器的指示点分页器会控制Swiper切换。
                spaceBetween: 10, //slide之间的距离（单位px）。
                freeMode: true, //默认为false，普通模式：slide滑动时只滑动一格，并自动贴合wrapper，设置为true则变为free模式，slide会根据惯性滑动且不会贴合。
                loop: false, //是否可循环
                initialSlide:initIndex,//初始定位
                onTab: function(swiper) {
                    var n = swiper1.clickedIndex;
                }
            });
            swiper1.slides.each(function(index, val) {
                var ele = $(this);
                ele.on("click", function() {
                    setCurrentSlide(ele, index);
                    swiper2.slideTo(index, 500, false);
                    //mySwiper.initialSlide=index;
                });
            });
    
            var swiper2 = new Swiper(sp2, {
                //freeModeSticky  设置为true 滑动会自动贴合  
                direction: 'horizontal', //Slides的滑动方向，可设置水平(horizontal)或垂直(vertical)。
                loop: false,
                initialSlide:initIndex,
                //effect : 'fade',//淡入
                //effect : 'cube',//方块
                //effect : 'coverflow',//3D流
                //effect : 'flip',//3D翻转
                autoHeight: true, //自动高度。设置为true时，wrapper和container会随着当前slide的高度而发生变化。
                onSlideChangeEnd: function(swiper) { //回调函数，swiper从一个slide过渡到另一个slide结束时执行。
                    var n = swiper.activeIndex;
                    setCurrentSlide($(".swiper1 .swiper-slide").eq(n), n);
                    swiper1.slideTo(n, 500, false);
                }
            });
        };
    </script>
</html>
